<ion-tabs (ionTabsDidChange)="tabchange($event)">

  <ion-tab-bar slot="bottom" color="bgbottom" style="padding-bottom: 1.6rem">
    
    <ion-tab-button tab="tab1">
      <div *ngIf="tabname == 'tab1'; else templateName">
        <img src="assets/h1.png" />
        <ion-label color="onbottom">首页</ion-label>
      </div>
      <ng-template #templateName>
        <img src="assets/hh1.png" />
        <ion-label>首页</ion-label>
      </ng-template>
      
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <div *ngIf="tabname == 'tab2'; else templateName2"><img src="assets/h2.png" /><ion-label color="onbottom">商城</ion-label></div>
      <ng-template #templateName2><img src="assets/hh2.png" /><ion-label>商城</ion-label></ng-template>
      
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <div *ngIf="tabname == 'tab3'; else templateName3"><img src="assets/h3.png" /><ion-label color="onbottom">算力池</ion-label></div>
      <ng-template #templateName3><img src="assets/hh3.png" /><ion-label>算力池</ion-label></ng-template>
      
    </ion-tab-button>

    <ion-tab-button tab="tab4">
      <div *ngIf="tabname == 'tab4'; else templateName4"><img src="assets/h4.png" /><ion-label color="onbottom">我的</ion-label></div>
      <ng-template #templateName4><img src="assets/hh4.png" /><ion-label>我的</ion-label></ng-template>
      
    </ion-tab-button>

  </ion-tab-bar>
  
</ion-tabs>
